<!-- 供货果园 - 果园列表  -->
<template>
  <!-- 搜索工作栏 -->
<ContentWrap v-if="pageListShow">
  <el-form
    ref="queryFormRef"
    :inline="true"
    :model="queryParams"
    class="-mb-15px"
    label-width="68px"
  >
    <el-form-item label="果园名称" prop="name">
      <el-input
        v-model="queryParams.name"
        class="!w-240px"
        clearable
        placeholder="请输入果园名称"
        @keyup.enter="handleQuery"
      />
    </el-form-item>
    <el-form-item label="联系号码" prop="phone">
      <el-input
        v-model="queryParams.phone"
        class="!w-240px"
        clearable
        placeholder="请输入联系号码"
        @keyup.enter="handleQuery"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="handleQuery">
        <Icon class="mr-5px" icon="ep:search" />
        搜索
      </el-button>
      <el-button @click="resetQuery">
        <Icon class="mr-5px" icon="ep:refresh" />
        重置
      </el-button>
      <el-button
        v-hasPermi="['product:orchard:add']"
        plain
        type="primary"
        @click="openForm(undefined)"
      >
        <Icon class="mr-5px" icon="ep:plus" />
        新增
      </el-button>     
    </el-form-item>
  </el-form>
</ContentWrap>

<!-- 列表 -->
<ContentWrap v-if="pageListShow">
  <el-table v-loading="loading" :data="list">
    <el-table-column label="ID" min-width="140" prop="id" />
    <el-table-column label="果园封面图" min-width="200">
      <template #default="{ row }">
        <div class="flex">
          <el-image
            fit="cover"
            :src="row.avatar"
            class="flex-none w-50px h-50px"
            @click="imagePreview(row.avatar)"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="果园名称" min-width="120" prop="name" />
    <el-table-column align="center" label="联系人" min-width="100" prop="contacts" />      
    <el-table-column align="center" label="联系号码" min-width="120" prop="phone" />
    <el-table-column align="center" label="供货分类" min-width="100" prop="categoryName" />
    <el-table-column align="center" label="所在城市" min-width="90" prop="city" />
    <el-table-column align="center" label="是否直营" min-width="80" prop="selfOrchard">
      <template #default="{ row }">
        <el-switch
            v-model="row.selfOrchard"
            :active-value="true"
            :inactive-value="false"
            active-text="是"
            inactive-text="否"
            inline-prompt            
          />
      </template>
    </el-table-column>
    <el-table-column align="center" label="状态" min-width="80">
      <template #default="{ row }">
        <el-switch
            v-model="row.status"
            :active-value="0"
            :inactive-value="1"
            active-text="正常"
            inactive-text="禁用"
            inline-prompt
            @change="handleStatusChange(row)"
          />
      </template>
    </el-table-column>
    <el-table-column
      :formatter="dateFormatter"
      align="center"
      label="添加时间"
      prop="createTime"
      width="180"
    />
    <el-table-column align="center" fixed="right" label="操作" min-width="200">
      <template #default="{ row }">
        <!-- <el-button link type="primary" @click="openDetail(row.id)"> 详情 </el-button> -->
        <el-button
          v-hasPermi="['product:orchard:edit']"
          link
          type="primary"
          @click="openForm(row.id)"
        >
          修改
        </el-button>
        <!-- <template v-if="queryParams.tabType === 4">
          <el-button
            v-hasPermi="['product:spu:delete']"
            link
            type="danger"
            @click="handleDelete(row.id)"
          >
            删除
          </el-button>
          <el-button
            v-hasPermi="['product:spu:update']"
            link
            type="primary"
            @click="handleStatus02Change(row, ProductSpuStatusEnum.DISABLE.status)"
          >
            恢复
          </el-button>
        </template> -->
       
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <Pagination
    v-model:limit="queryParams.pageSize"
    v-model:page="queryParams.pageNo"
    :total="total"
    @pagination="getList"
  />
</ContentWrap>
<ContentWrap v-if="!pageListShow">
  <addForm ref="addFormRef" :orchardId="orchardId" @cancelFormHandle="cancelFormHandle"/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { TabsPaneContext } from 'element-plus'
import { createImageViewer } from '@/components/ImageViewer'
import { dateFormatter } from '@/utils/formatTime'
import * as OrchardApi from '@/api/mall/orchard/orchard'
import addForm from './form/addForm.vue'

defineOptions({ name: 'OrchardList' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转

const loading = ref(false) // 列表的加载中
const pageListShow = ref(true) // 列表or表单
const exportLoading = ref(false) // 导出的加载中
const total = ref(0) // 列表的总页数
const list = ref<OrchardApi.Orchard[]>([]) // 列表的数据

const addFormRef = ref(null)

const orchardId = ref()

const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  name: '',
  phone: ''
}) // 查询参数
const queryFormRef = ref() // 搜索的表单Ref

const getList = async () => {
  loading.value = true
  try {
    const data = await OrchardApi.getPageList(queryParams.value)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const openForm = (id) => {
  pageListShow.value = false
  if(id != null && id != undefined) {
    orchardId.value = id
  }
}

const cancelFormHandle = () => {
  pageListShow.value = true
  getList()
}

/** 激活时 */
onActivated(() => {
  getList()
})

/** 初始化 **/
onMounted(async () => {
  await getList()
})
</script>